<template>
<div class="swipe">
  <el-carousel height="45rem" arrow="always" indicator-position="outside">
    <el-carousel-item>
      <img src="@/assets/img/home/swipe1.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="@/assets/img/home/swipe2.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="@/assets/img/home/swipe3.png" alt="">
    </el-carousel-item>
  </el-carousel>
</div>
</template>

<script>
import Vue from 'vue';
import {Carousel,CarouselItem} from 'element-ui';
Vue.use(Carousel);
Vue.use(CarouselItem);
export default {
  name: "swipe"
}
</script>

<style scoped>
/deep/ .el-carousel__button{
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  margin: 0 .5rem;
  background-color: #7A3FBF;
}
/deep/ .el-carousel__arrow{
  width: 5rem;
  height: 5rem;
  border-radius: 0;
  font-size: 3rem;
  background-color: rgba(117, 53, 187, 0.73);
}
img{
  width: 100%;
  height: 100%;
}
</style>